<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>通讯录</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-indexed-list.css"/>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/style.css" /> -->
    <style type="text/css">
        .aui-img-object{
            width: 30px !important;
            height: 30px !important;
        }
        .whiteBg{
            background: #f3f3f3 !important;
        }
    </style>
</head>
<body>
    <div class="aui-searchbar-wrap" id="search">
        <div class="aui-searchbar aui-border-radius" tapmode onclick="doSearch()">
            <i class="aui-iconfont aui-icon-search"></i>
            <div class="aui-searchbar-text">输入首字母</div>
            <div class="aui-searchbar-input">
                <form action="javascript:search();">
                    <input type="search" placeholder="请输入搜索内容" id="search-input">
                </form>
            </div>
            <i class="aui-iconfont aui-icon-roundclosefill" tapmode onclick="clearInput()"></i>
        </div>
        <div class="aui-searchbar-cancel aui-text-info" tapmode onclick="cancelSearch()">取消</div>
    </div>

    <div id="page_content">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" tapmode onclick="openToTwo('newfriend_win')">
                <a><i class="aui-iconfont  aui-icon-friendaddfill" style="color:#5fce8b;"></i>新的朋友</a>
            </li>
        </ul>
        <ul id="content-friendlist" class="aui-list-view aui-indexed-list-view aui-in" data-group="*" style="display: none;"></ul>
        <div class="aui-indexed-list-toast"></div>
        <div class="aui-indexed-list-bar" id="content-index" style="top:60px;"></div>
    </div>
    <div id="search_content" style="position: absolute;left:0;top:50px;z-index: 9999;width: 100%;height: 100%;display: none;">
        <div style="position: relative;width: 100%;height: 100%;">
            <ul class="aui-list-view search_list" style="position: relative;z-index: 9999;">
            </ul>
            <div class="mask" style="position: absolute;left:0;top:0;width: 100%;height: 100%;background: rgba(0,0,0,0.2);" onclick="cancelSearch();"></div>
        </div>
    </div>

</body>
<script id="list-template" type="text/x-dot-template">
    {{ for(var j in it){ }}
    <li class="aui-list-view-cell aui-img user-item" tapmode onclick="go2User({{=it[j].userid}},'../')" data-userid="{{=it[j].userid}}">
        <img class="aui-img-object aui-pull-left" src="{{=it[j].thumb}}">
        <div class="aui-img-body user-name">{{=it[j].company}}</div>
    </li>
    {{ } }}
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>

<script type="text/javascript" src="../../script/aui-tap.js" ></script>
<script type="text/javascript" src="../../script/aui-indexed-list.js" ></script>

<script type="text/javascript">
    var isLock=false;
    apiready=function (argument) {
        api.parseTapmode();

    	var header = $api.dom('header');
		$api.fixIos7Bar(header);

        loadData();

        api.addEventListener({
            name: 'refreshContactList'
        }, function(ret, err) {
            loadData();            
        });
    }

    function loadData(){

        getStorageAll();

        var data = {};
        var url='Friendship/getList?username='+user_name;

        if(!isLock){
            ajaxRequest(url, 'get', data, function (ret, err) {
                isLock=false;          

                if (ret.status == 1) {
                    $('#content-friendlist,#content-index').html('');
                    var indexes=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#'];
                    for(i=indexes.length-1;i>=0;i--){
                         for(j in ret.msg){
                            if(j==indexes[i]){
                                var tpl = $api.byId('list-template').text;
                                var tempFn = doT.template(tpl);
                                $('#content-friendlist').show().prepend('<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-'+j+'" data-group="'+j+'">'+j+'</li>'+tempFn(ret.msg[j]));

                                
                                $('#content-index').show().prepend('<a data-value="'+j+'">'+j+'</a>');
                            }
                         } 
                    }
                } else {
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            });
        }
        isLock = true;

    }

    function doSearch(){
        $api.addCls($api.dom(".aui-searchbar-wrap"),"focus");
        $api.dom('.aui-searchbar-input input').focus();

        $('#search_content').show();
    }
    function cancelSearch(){
        $api.removeCls($api.dom(".aui-searchbar-wrap.focus"),"focus");
        $api.val($api.byId("search-input"),'');
        $api.dom('.aui-searchbar-input input').blur();

        $('#search_content').hide();
        $('#search_content').find('.mask').removeClass('whiteBg');
        $('#search_content .search_list').html('');
    }
    function clearInput(){
        $api.val($api.byId("search-input"),'');
    }
    function search(){
        var content = $api.val($api.byId("search-input"));
        if(content){
            // api.alert({
            //     title: '搜索提示',
            //     msg: '您输入的内容为：'+content
            // });
        }else{
            api.alert({
                title: '搜索提示',
                msg: '您没有输入任何内容'
            });
        }
        cancelSearch();
    }

    $(document).ready(function(){
        $('#search-input').keyup(function(){
            var value=$(this).val().toLowerCase();
            value=value.replace(/\s+/g,'');
            var searchCount=0;
            if(value){
                $('#page_content .user-name').each(function(){
                    var name=$(this).text().toLowerCase();
                    var regex=new RegExp("^"+value);
                    var objectId=$(this).closest('.user-item').attr('data-userid');
                    var $objectRow=$('#search_content .user-item[data-userid='+objectId+']');
                     if(name.match(value)){    
                        if(!$objectRow.length){
                            $(this).closest('.user-item').clone().appendTo($('#search_content .search_list'));
                            $('#search_content').find('.mask').addClass('whiteBg');
                        }
                        searchCount++;
                     }else{
                        if($objectRow.length){
                            $objectRow.remove();
                        }
                     }
                });
            }
            if(!value||!searchCount){
                $('#search_content .search_list').html('');
                if(!searchCount){
                    $('#search_content').find('.mask').removeClass('whiteBg');
                }
            }
        });
    })
</script>

</html>